<!--
[{packageId: '', name: ''}]
-->
<template>
    <el-dialog title="选择套餐" :visible.sync="dialogVisible" class="el-dialog-edit">
        <div class="form-item" v-if="count !== 1">
            <span class="item-title">所选套餐:</span>
            <div class="el-tag-box">
                <el-tag v-for="(item, index) of itemsChecked" :key="item.packageId" :closable="true" @close="delGoods(index)">{{item.name}}</el-tag>
            </div>
        </div>
      <!--搜索套餐-->
      <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="100px" style="width: 100%">
        <input type="text" style="display: none"/><!--form input placeholder-->
        <el-row :gutter="50">
          <el-col :xs="24">
            <el-form-item label="套餐名称：" prop="name">
              <el-input @keyup.enter.native="search" v-model="listQuery.name" placeholder="按套餐名称搜索" maxlength="50" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="" class="btn-item">
          <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
            <el-table-column align="center" width="50">
                <template slot-scope="scope">
                    <label class="input-radio" v-if="count === 1">
                        <input type="radio" :value="{packageId: scope.row.packageId, name: scope.row.name}" v-model="itemRadio"/>
                        <span></span>
                    </label>
                    <label class="input-checkbox" v-else>
                        <input type="checkbox" :value="{packageId: scope.row.packageId, name: scope.row.name}" v-model="itemsChecked"/>
                        <span></span>
                    </label>
                </template>
            </el-table-column>
            <el-table-column align="center" label="套餐名称" min-width="110">
                <template slot-scope="scope">
                    <div class="text-justify">
                        <p v-text="scope.row.name"></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="套餐类型">
                <template slot-scope="scope">
                    <span v-text="types[scope.row.type]"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="市场价">
                <template slot-scope="scope">
                    <span>{{scope.row.marketValue | money}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="兰蜜价">
                <template slot-scope="scope">
                    <span>{{scope.row.price | money}}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="listQuery.pageIndex"
                :page-size="listQuery.pageSize"
                background
                layout="total, prev, pager, next, jumper"
                style="text-align: center"
                :total="listTotal">
        </el-pagination>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="btnLoading" @click="ackChoose">确定</el-button>
            <el-button @click="cancelChoose">取消</el-button>
        </div>
    </el-dialog>
</template>
<script>
    export default {
        name: 'ackChoose',
        props: {
            check: {
                type: Array,
                default() {
                    return [];
                }
            },
            count: {
                type: Number,
                default: -1
            }
        },
        data(){
            return {
                types: {
                    '1': '固定模式',
                    '2': '自由组合模式',
                },
                dialogVisible: true,
                itemRadio: {},
                itemsChecked: this.check,
                listQuery: {
                    name: '',
                    isPage: 1,
                    pageIndex: 1,
                    pageSize: 10
                },
                listLoading: false,
                btnLoading: false,
                list: [],
                listTotal: 0
            }
        },
        created() {
            this.getList();
            if (this.count === 1 && this.check.length > 0) {
                this.itemRadio = this.check[0];
            }
        },
        methods: {
            getList(){
                this.listLoading = true;
                this.request({
                    url: '/bsnl-activity/package/list',
                    method: 'post',
                    data: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            delItem(index){
                this.itemsChecked.splice(index, 1);
            },
            search(){
                this.listQuery.pageIndex = 1;
                this.getList();
            },
            clickRow({packageId, name}){
                if (this.count === 1) {
                    this.itemRadio = {
                        packageId,
                        name
                    };
                    return false;
                }
                let index = this.itemsChecked.findIndex(item => item.packageId === packageId);
                if (index < 0) {
                    this.itemsChecked.push({
                        packageId,
                        name
                    });
                } else {
                    this.itemsChecked.splice(index, 1);
                }
            },
            // 切换分页
            handleCurrentChange(page) {
                this.listQuery.pageIndex = page;
                this.getList();
            },
            // 确定选择
            ackChoose(){
                if(this.count === 1 && this.itemRadio.packageId){
                    this.itemsChecked = [this.itemRadio]
                }
                if(this.itemsChecked.length < 1){
                    return this.$message.error('请选择套餐');
                }
                if(this.count > 0 && this.itemsChecked.length > this.count){
                    return this.$message.error(`最多选择${this.count}个套餐`);
                }
                this.$emit('choose', this.itemsChecked);
                this.dialogVisible = false;
                document.body.removeChild(this.$el);
            },
            // 取消选择
            cancelChoose(){
                this.dialogVisible = false;
                document.body.removeChild(this.$el);
            }
        }
    }
</script>
<!--
<template>
    <el-dialog title="选择套餐" :visible.sync="showGoodsPop" class="el-dialog-edit">
        <div class="form-item" v-if="count !== 1">
            <span class="item-title">所选套餐:</span>
            <div class="el-tag-box">
                <el-tag v-for="(goods, index) of goodsCheck" :key="goods.id" :closable="true" @close="delGoods(index)">{{goods.name}}</el-tag>
            </div>
        </div>
        &lt;!&ndash;<div class="filter-container">&ndash;&gt;
            &lt;!&ndash;<el-input @keyup.enter.native="search" class="filter-item" placeholder="按名称搜索" v-model="params.name"></el-input>&ndash;&gt;
            &lt;!&ndash;<el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>&ndash;&gt;
        &lt;!&ndash;</div>&ndash;&gt;
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border @row-click="clickRow">
            <el-table-column align="center" width="50">
                <template slot-scope="scope">
                    <label class="input-radio" v-if="count === 1">
                        <input type="radio" :value="{id: scope.row.packageId, name: scope.row.name}" v-model="goodsRadio"/>
                        <span></span>
                    </label>
                    <label class="input-checkbox" v-else>
                        <input type="checkbox" :value="{id: scope.row.packageId, name: scope.row.name}" v-model="goodsCheck"/>
                        <span></span>
                    </label>
                </template>
            </el-table-column>
            <el-table-column align="center" label="套餐名称" min-width="110">
                <template slot-scope="scope">
                    <div class="text-justify">
                        <p v-text="scope.row.name"></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="套餐类型">
                <template slot-scope="scope">
                    <span v-text="types[scope.row.type]"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="市场价">
                <template slot-scope="scope">
                    <span>{{scope.row.marketValue | money}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="兰蜜价">
                <template slot-scope="scope">
                    <span>{{scope.row.price | money}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container" v-if="total > 0">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="pageSize" :total="total" layout="total, prev, pager, next, jumper"></el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="btnDisabled" @click="chooseGoods">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: 'chooseGoods',
        props: {
            check: {
                type: Array,
                default() {
                    return [];
                }
            },
            count: {
                type: Number,
                default: -1
            }
        },
        data() {
            return {
                list: [],
                params: {
                    name: ''
                },
                showGoodsPop: true,
                goodsCheck: this.check,
                goodsRadio: {},
                query: {},
                page: 1,
                pageSize: 10,
                total: 0,
                types: {
                    '1': '固定模式',
                    '2': '自由组合模式',
                },
                listLoading: false,
                btnDisabled: false,
            }
        },
        created() {
            this.getList();
            if (this.count === 1 && this.check.length > 0) {
                this.goodsRadio = this.check[0];
            }
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-activity/package/list',
                    method: 'get',
                    params: {
                        ...this.query,
                        isPage: 1,
                        pageIndex: this.page,
                        pageSize: this.pageSize
                    }
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.total = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.total = 0;
                    this.listLoading = false;
                });
            },
            // 单击行
            clickRow({packageId, name}) {
                if (this.count === 1) {
                    this.goodsRadio = {
                        id: packageId,
                        name
                    };
                    return false;
                }
                let index = this.goodsCheck.findIndex(item => item.id === packageId);
                if (index < 0) {
                    this.goodsCheck.push({
                        id: packageId,
                        name
                    });
                } else {
                    this.goodsCheck.splice(index, 1);
                }
            },
            // 通过tag删除
            delGoods(index) {
                this.goodsCheck.splice(index, 1);
            },
            // 选择商品
            chooseGoods() {
                if(this.count === 1){
                    this.goodsCheck = [this.goodsRadio]
                }
                if(this.goodsCheck.length < 1){
                    return this.$message.error('请选择套餐');
                }
                if(this.count > 0 && this.goodsCheck.length > this.count){
                    return this.$message.error(`最多选择${this.count}个套餐`);
                }
                this.$emit('choose', this.goodsCheck);
                this.close();
            },
            // 关闭弹窗
            close() {
                this.showGoodsPop = false;
                document.body.removeChild(this.$el);
            },
            // 搜索
            search() {
                this.page = 1;
                this.query = {...this.params};
                this.getList();
            },
            // 切换分页
            handleCurrentChange(page) {
                this.page = page;
                this.getList();
            },
        }
    }
</script>
-->
